import React, { useEffect, useState } from 'react';
const DocumentProcessingWronglyModals = React.lazy(
  () => import('./DocumentProcessingWronglyModals'), //错别字
);
const DocumentViolationHandlingModals = React.lazy(
  () => import('./DocumentViolationHandlingModals'), //敏感词
);
const DocumentRepetitionModals = React.lazy(() => import('./DocumentRepetitionModals')); //重复
import { OptimizedistType } from '@/types/know/know';
import { AntdTabs } from '@/components/eai-design';
import { useKnowledgeStore } from '@/store/knowledge';
import { SvgIcon } from '@/components/icon';
interface DocumentProcessingModalsProps {
  collectionItem: OptimizedistType;
  flag: boolean | undefined;
  setFlag: (flag: boolean | undefined) => void;
  deleteDatasetFile?: () => void;
}

const DocumentProcessingModals = ({
  collectionItem,
  flag,
  setFlag,
  deleteDatasetFile,
}: DocumentProcessingModalsProps) => {
  const [key, setKey] = useState('0');
  const [loadedTabs, setLoadedTabs] = useState<Record<string, boolean>>({ '0': true });
  const { listLength } = useKnowledgeStore();

  useEffect(() => {
    setKey('0');
    setLoadedTabs({ '0': true });
  }, [collectionItem]);

  useEffect(() => {
    console.log(listLength);
  }, [listLength]);

  function getTabItems(optimizeTextArr: string[] = []) {
    return Array.isArray(optimizeTextArr)
      ? optimizeTextArr.map((text, idx) => ({
          key: String(idx),
          label: (
            <div className="flex items-center">
              <SvgIcon icon="document-ic3" size={16} className="mr-1" />
              {text}
            </div>
          ),
          children:
            key === String(idx) ? (loadedTabs[String(idx)] ? getChildren(text) : null) : null,
        }))
      : [];
  }
  const getChildren = (text: string) => {
    const t = text || '';
    if (t.includes('错别字')) {
      return <DocumentProcessingWronglyModals collectionItem={collectionItem} flag={flag} />;
    }
    if (t.includes('敏感词')) {
      return <DocumentViolationHandlingModals collectionItem={collectionItem} flag={flag} />;
    }
    if (t.includes('重复')) {
      return (
        <DocumentRepetitionModals
          collectionItem={collectionItem}
          flag={flag}
          deleteDatasetFile={deleteDatasetFile}
        />
      );
    }
    return null;
  };

  const changeTabs = (newKey: string) => {
    setKey(newKey);
    setLoadedTabs((prev) => ({
      ...prev,
      [newKey]: true,
    }));
    setFlag(undefined);
  };

  return (
    <div>
      <AntdTabs
        items={getTabItems(collectionItem?.optimize_text)}
        onChange={changeTabs}
        activeKey={key}
      />
    </div>
  );
};

export default DocumentProcessingModals;
